<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    function FancyBorder(props) {
        return (
                <div className={'FancyBorder FancyBorder-' + props.color}>
                    {props.children}
                </div>
        );
    }

    function Dialog(props) {
        return (
                <FancyBorder color="blue">
                    <h1 className="Dialog-title">
                        {props.title}
                    </h1>
                    <p className="Dialog-message">
                        {props.message}
                    </p>
                    {props.children}//Get Children Dom
                </FancyBorder>
        );
    }

    class SignUpDialog extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.handleSignUp = this.handleSignUp.bind(this);
            this.state = {login: ''};
        }

        render() {
            return (
                    <Dialog title="Mars Exploration Program"
                            message="How should we refer to you?">
                        <input value={this.state.login}
                               onChange={this.handleChange} />
                        <button onClick={this.handleSignUp}>
                            Sign Me Up!
                        </button>
                    </Dialog>
            );
        }

        handleChange(e) {
            this.setState({login: e.target.value});
        }

        handleSignUp() {
            alert(`Welcome aboard, ${this.state.login}!`);
        }
    }

    ReactDOM.render(
            <SignUpDialog />,
        document.getElementById('example')
    );



</script>
</body>
</html>

